<template>
  <AppLayout>
    <div class="xtx-goods-page" v-if="goodsDetails">
      <div class="container">
        <!-- 面包屑 -->
        <XtxBread>
          <XtxBreadItem path="/">首页</XtxBreadItem>
          <XtxBreadItem :path="`/category/${goodsDetails.categories[1].id}`">{{
            goodsDetails.categories[1].name
          }}</XtxBreadItem>
          <XtxBreadItem
            :path="`/category/sub/${goodsDetails.categories[0].id}`"
            >{{ goodsDetails.categories[0].name }}</XtxBreadItem
          >
          <XtxBreadItem>{{ goodsDetails?.name }}</XtxBreadItem>
        </XtxBread>
        <!-- 商品信息 -->
        <div class="goods-info">
          <!-- 左侧 -->
          <div class="media">
            <GoodsImages :images="goodsDetails.mainPictures"> </GoodsImages>
            <GoodsSales></GoodsSales>
          </div>
          <!-- 右侧 -->
          <div class="spec">
            <GoodInfo :goods="goodsDetails"></GoodInfo>
            <GoodsSku
              @onSpecChanged="onSpecChanged"
              :skus="goodsDetails.skus"
              :specs="goodsDetails.specs"
            />
            <XtxNumberBox
              label="数量"
              v-model="count"
              :inventory="goodsDetails.inventory"
            ></XtxNumberBox>
            <XtxButton
              type="primary"
              :style="{ 'margin-top': '20px' }"
              @click="addCart"
              >加入购物车</XtxButton
            >
          </div>
        </div>
        <!-- 商品推荐 -->
        <GoodsRelevant :goodsId="goodsDetails.id"></GoodsRelevant>
        <!-- 商品详情 -->
        <div class="goods-footer">
          <div class="goods-article">
            <!-- 商品+评价 -->
            <!-- 商品+评价 -->

            <div class="goods-tabs"><GoodsTab /></div>
            <!-- 注意事项 -->
            <div class="goods-warn">
              <!-- 注意事项 -->
              <GoodsWarn />
            </div>
          </div>
          <!-- 24热榜 -->
          <div class="goods-aside">
            <div class="goods-aside">
              <GoodsHot :type="1" />
              <GoodsHot :type="2" />
              <GoodsHot :type="3" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </AppLayout>
</template>

<script>
import GoodsRelevant from "@/views/goods/components/GoodsRelevant";
import AppLayout from "@/components/AppLayout";
import GoodsImages from "@/views/goods/components/GoodsImages";
import GoodsSales from "@/views/goods/components/GoodsSales";
import GoodInfo from "@/views/goods/components/GoodsInfo";
import GoodsSku from "@/views/goods/components/GoodsSku";
import GoodsTab from "@/views/goods/components/GoodsTab";
import GoodsHot from "@/views/goods/components/GoodsHot";
import GoodsWarn from "@/views/goods/components/GoodsWarn";

import { getGoodsDetailById } from "@/api/goods";
import { useRoute } from "vue-router";
import { ref, provide } from "vue";
import Message from "@/components/library/Message";
import store from "@/store";
export default {
  name: "GoodsDetailPage",
  components: {
    GoodsRelevant,
    AppLayout,
    GoodsImages,
    GoodsSales,
    GoodInfo,
    GoodsSku,
    GoodsTab,
    GoodsHot,
    GoodsWarn,
  },
  setup() {
    const { goodsDetails, useData } = useGoods();
    const route = useRoute();
    // 调用方法获取数据
    useData(route.params.id);
    // 更新商品信息
    const onSpecChanged = (data) => {
      goodsDetails.value.inventory = data.inventory;
      goodsDetails.value.oldPrice = data.oldPrice;
      goodsDetails.value.price = data.price;
      goodsDetails.value.attrsText = data.attrsText;
      goodsDetails.value.skuId = data.skuId;
    };
    provide("goodsDetails", goodsDetails);
    // 商品数量
    const count = ref(1);
    const addCart = () => {
      // 判断用户是否选择了规格
      if (!goodsDetails.value.skuId) {
        return Message({ type: "error", text: "请选择商品规格" });
      }
      // 获取商品信息
      const goods = {
        // 商品id
        id: goodsDetails.value.id,
        // 商品 skuId
        skuId: goodsDetails.value.skuId,
        // 商品名称
        name: goodsDetails.value.name,
        // 商品规格属性文字
        attrsText: goodsDetails.value.attrsText,
        // 商品图片
        picture: goodsDetails.value.mainPictures[0],
        // 商品原价
        price: goodsDetails.value.oldPrice,
        // 商品现价
        nowPrice: goodsDetails.value.price,
        // 是否选中
        selected: true,
        // 商品库存
        stock: goodsDetails.value.inventory,
        // 用户选择的商品数量
        count: count.value,
        // 是否为有效商品
        isEffective: true,
      };
      store
        .dispatch("cart/addGoodsToCart", goods)
        .then(() => {
          Message({ type: "success", text: "商品添加成功" });
        })
        .catch((error) => {
          Message({ type: "error", text: `${error.response.data.message}` });
        });
    };
    return {
      goodsDetails,
      onSpecChanged,
      count,
      addCart,
    };
  },
};

// 获取商品详情数据
function useGoods() {
  // 保存商品详情数据
  const goodsDetails = ref();
  const useData = (id) => {
    // 发请求获取数据;
    getGoodsDetailById(id).then((data) => {
      // 保存商品信息
      goodsDetails.value = data.result;
    });
  };
  return {
    useData,
    goodsDetails,
  };
}
</script>

<style scoped lang="less">
.goods-info {
  min-height: 600px;
  background: #fff;
  display: flex;
  .media {
    width: 580px;
    height: 600px;
    padding: 30px 50px;
  }
  .spec {
    flex: 1;
    padding: 30px 30px 30px 0;
  }
}
.goods-footer {
  display: flex;
  margin-top: 20px;
  .goods-article {
    width: 940px;
    margin-right: 20px;
  }
  .goods-aside {
    width: 280px;
    min-height: 1000px;
  }
}
.goods-tabs {
  min-height: 600px;
  background: #fff;
}
.goods-warn {
  min-height: 600px;
  background: #fff;
  margin-top: 20px;
}
</style>
